<template>
    <el-container>
        <el-header>
            <v-header />
        </el-header>
        <el-container>
            <el-aside width="auto">
                <v-sidebar />
            </el-aside>
            <el-main class="main_container">
                <v-tags></v-tags>
                <div class="content">
                    <router-view v-slot="{ Component }">
                        <transition name="move" mode="out-in">
                            <keep-alive :include="tags.nameList">
                                <component :is="Component" />
                            </keep-alive>
                        </transition>
                    </router-view>
                <!-- <el-backtop target=".content"></el-backtop> -->
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { useSidebarStore } from '../../store/sidebar'
import { useTagsStore } from '../../store/tags'
import vHeader from "../../components/header/Header.vue";
import vSidebar from "../../components/menu/Sidebar.vue";
import vTags from "../../components/tags/Tags.vue";
import { onMounted, getCurrentInstance } from 'vue'

export default {
    components: {
        vHeader,
        vSidebar,
        vTags,
    },
    setup(options) {
        const sidebar = useSidebarStore();
        const tags = useTagsStore();
        // utils方法测试
        onMounted(() => {
            const { proxy } = getCurrentInstance()
            proxy.$storage.set('user','001')
            console.log(tags,2222)
            console.log(proxy.$time.getDate())
        })
        return {
            tags,
            sidebar,
        };
    },
};
</script>
